<template>
  <div class="all">
    <div class="box">
      <div class="left">
        <img src="../../assets/newproducts.png" />
      </div>
      <div class="right">
        <a href="https://www.mi.com/xiaomicivi1s">
          <div class="XiaomiCivi">
            <h5>Xiaomi Civi 1S</h5>
            <div class="slogan">你的光芒 天生好看</div>
            <div class="price">2299元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/redmi10a">
          <div class="RedmiA">
            <h5>Redmi 10A</h5>
            <div class="slogan">大电量、大音量、大屏幕</div>
            <div class="price">
              <span class="present-price">649元起</span>
              <span class="original-price">699元</span>
            </div>
          </div>
        </a>
        <a href="https://www.mi.com/redmik50pro">
          <div class="RedmiK-pro">
            <h5>Redmi K50 Pro</h5>
            <div class="slogan">2K直屏的狠旗舰</div>
            <div class="price">2999元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/redmik50">
          <div class="RedmiK">
            <h5>Redmi K50</h5>
            <div class="slogan">2K直屏的狠旗舰</div>
            <div class="price">2399元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/redmik40s">
          <div class="RedmiK-s">
            <h5>Redmi K40S</h5>
            <div class="slogan">口碑真旗舰</div>
            <div class="price">1799元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/redmik50g">
          <div class="RedmiK-e-sport">
            <h5>Redmi K50 电竞版</h5>
            <div class="slogan">全线拉满的冷血旗舰</div>
            <div class="price">3299元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/mi12pro">
          <div class="Xiaomi-pro">
            <h5>Xiaomi 12 Pro</h5>
            <div class="slogan">全新骁龙8 | 2K AMOLED屏幕</div>
            <div class="price">4699元起</div>
          </div>
        </a>
        <a href="https://www.mi.com/mi12">
          <div class="Xiaomi">
            <h5>Xiaomi 12</h5>
            <div class="slogan">全新骁龙8 | 5000万主摄</div>
            <div class="price">3699元起</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FloatPart",
};
</script>

<style scoped>
.all {
  width: 100%; /*此时不需要设置高度，因为组件app已经设置过高度了*/
  background-color: #f5f5f5;
}

.box {
  width: 1402px;
  height: 750px;
  background-color: #f5f5f5;
  margin: 0 auto;
}
.left {
  float: left; /*不需要设置高度来限制*/
  height: 700px;
  background-color: #ffffff;
  margin-top: 20px;
  position: relative;
  z-index: 999; /*使在上层显示*/
}
.left :hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.left img {
  width: 265px;
}
.right {
  float: left;
  width: 1133px;
  height: 700px;
  background-color: #f5f5f5;
  margin-top: 20px;
}

.XiaomiCivi:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.RedmiA:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.RedmiK-pro:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.RedmiK:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.RedmiK-s:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.RedmiK-e-sport:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.Xiaomi-pro:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.Xiaomi:hover {
  box-shadow: 0 0 10px 4px #cfcfcf;
  transition: all 1s;
}
.XiaomiCivi,
.RedmiA,
.RedmiK-pro,
.RedmiK {
  margin-bottom: 18px;
  height: 340px;
  width: 265px;
  background-color: #ffffff;
  float: left;
  margin-left: 18px;
}
.RedmiK-s,
.RedmiK-e-sport,
.Xiaomi-pro,
.Xiaomi {
  height: 340px;
  width: 265px;
  background-color: #ffffff;
  float: left;
  margin-left: 18px;
}
.XiaomiCivi {
  background-image: url("../../assets/xiaomicivi.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
h5 {
  text-align: center;
  margin-top: 200px;
  font-weight: 400;
  /*font-family: "Microsoft YaHei";*/
}
.slogan {
  font-size: 13px;
  color: #777777;
  text-align: center;
}
.price {
  padding: 0 95px;
  margin-top: 30px;
  color: #ff6700;
}
.RedmiA {
  background-image: url("../../assets/RadmiA.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.RedmiA .price {
  padding: 0 75px;
  margin-top: 30px;
  color: #ff6700;
}
.RedmiA .original-price {
  color: #777777;
  text-decoration: line-through;
  margin-left: 10px;
}
.RedmiK-pro {
  background-image: url("../../assets/RedmiKpro.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.RedmiK {
  background-image: url("../../assets/RedmiK.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.RedmiK-s {
  background-image: url("../../assets/RedmiKs.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.RedmiK-e-sport {
  background-image: url("../../assets/RedmiKesport.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.Xiaomi-pro {
  background-image: url("../../assets/xiaomipro.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
.Xiaomi {
  background-image: url("../../assets/Xiaomi.png");
  background-repeat: no-repeat;
  background-size: 155px;
  background-position: center 20px;
}
a {
  color: #000000;
}
</style>